<!--  -->
<template>
  <div class="outer-box">
    <div class="box">
      <div class="img-left"></div>
      <div class="right">
        <div class="title">志愿小帮手</div>
        <div style="height : 200px;width:400px">
          <el-form
            :model="ruleForm"
            status-icon
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="账户:" prop="account">
              <el-input
                type="test"
                v-model="ruleForm.account"
                autocomplete="off"
                placeholder="请输入账户"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码:" prop="password">
              <el-input
                type="password"
                v-model="ruleForm.password"
                autocomplete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item class="center">
              <el-button
                type="primary"
                @click="submitForm('ruleForm')"
                style="width:200px;background-color: #409EFF;"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="word">
      <div class="word-title">
        系统说明:
      </div>
      <ol style="font-size: 20px;">
        <li>
          本查询系统的信息仅供参考，具体数据请以学校官网或考试院公布为准。
        </li>
        <li>本站数据末经授权严禁转载，违者将依法追究责任。</li>
        <li>
          如有任何疑问，可发送邮件至: lijin@eol.cn。
        </li>
        <li>
          志愿填报客服电话:
          400-0678-211，商务或其他客服电话:400-666-9766，高校合作: 4006330111
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/user/user'
export default {
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账户'))
      } else {
        if (this.ruleForm.password.length <= 2) {
          //   this.$refs.ruleForm.validateField("account")
          callback(new Error('长度不小于2位'))
        }
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.password.length <= 8) {
          //   this.$refs.ruleForm.validateField("password")
          callback(new Error('长度不小于8位'))
        }
        callback()
      }
    }

    return {
      ruleForm: {
        account: '',
        password: ''
      },
      rules: {
        password: [{ validator: validatePass, trigger: 'blur' }],
        account: [{ validator: validateAccount, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      if (this.ruleForm.account.length < 2) {
        this.$msg.error('账户长度不少于两位')
        return
      }
      if (this.ruleForm.password.length < 8) {
        this.$msg.error('密码长度不少于8位')
        return
      }
      const param = {
        name: this.ruleForm.account,
        password: this.ruleForm.password
      }
      login(param).then(res => {
        if (res.code == 500) {
          this.$msg.error(res.msg)
        } else {
          this.$router.push('/index/page')
          this.$msg.success('欢迎进入系统')
          localStorage.setItem('user', JSON.stringify(res.data[0]))
        }
      })
    }
  }
}
</script>

<style scoped>
.word-title {
  font-size: 25px;
  font-weight: bold;
}
.outer-box {
  height: 800px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  /* height: 900px; */
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* background-image: url('../../assets/background.png'); */
}
.center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.title {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}
.img-left {
  background-image: url('../../assets/imgleft.png');
  height: 400px;
  width: 600px;
}
.right {
  height: 400px;
  width: 600px;
  background: rgb(242, 242, 242);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
